import React, { memo, useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { GoodsDetailWrapper } from "./style";
import { getGoodsDetail } from "@/service/shop";
import TopInfo from "./child/top-info";
import Summary from "./child/summary";
import AppFooter from "@/components/app-footer";
import Related from "./child/related";
export default memo(function GoodsDetail(props) {
  let arr = props.location.search.split('&');
  const id=arr[0].split('=')[1];
  const categoryId=arr[1].split('=')[1];
  // console.log(props.location.search);
  const [detail, setdetail] = useState({});
  const getDetail = async (id) => {
    const res = await getGoodsDetail(id);
    setdetail(res.data);
    document.title = res.data.basicInfo.name;
    // console.log(res);
  };
  useEffect(() => {
    getDetail(id);
  }, []);

  return (
    <GoodsDetailWrapper>
      <div className="goods-detail">
        <TopInfo detail={detail}></TopInfo>
        <Summary detail={detail}></Summary>
        <Related id={id} categoryId={categoryId}></Related>
      </div>
      <AppFooter></AppFooter>
    </GoodsDetailWrapper>
  );
});
